<template>
  <div class="resumeNumber">
    <!-- 头部 -->
    <echartsHeader title="简历增长统计" />
    <div class="contents">
      <div class="bg-change">
        <!-- 统计 块 -->
        <el-form label-width="90px" :model='form' :rules='rules' ref="form">
          <el-row :gutter="20" type="flex" class="row-bg" width='100%' justify='space-around'>
            <el-col :span="6">
              <el-form-item label="现居住地">
                <el-select placeholder="现居住地" v-model="form.currentResidence" :popper-append-to-body="false">
                  <el-option v-for='item in area' :value="item.val" :key='item.id' :label='item.name'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="dbInput">
              <el-form-item label="年龄" prop="startAge">
                <el-select v-model="form.startAge" filterable placeholder="请选择" :popper-append-to-body="false">
                  <el-option v-for="item in 45" :key="item" :value="item+15"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="-" label-width="12px" class="mr-left" prop='endAge'>
                <el-select v-model="form.endAge" filterable placeholder="请选择" :popper-append-to-body="false">
                  <el-option v-for="item in 45" :key="item" :value="item+15"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                <el-select placeholder="性别" v-model="form.sex" :popper-append-to-body="false">
                  <el-option :value="2" label="女"></el-option>
                  <el-option :value="1" label="男"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历">
                <el-select placeholder="学历" v-model="form.education" :popper-append-to-body="false">
                  <el-option v-for='item in education' :value="item.val" :key='item.id' :label='item.name'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex" class="row-bg" width='100%' justify='space-around'>
            <el-col :span="6" class="dbInput">
              <el-form-item label="薪酬" prop="startHopeWage">
                <el-input v-model.number="form.startHopeWage"></el-input>
              </el-form-item>
              <el-form-item label="-" label-width='12px' class="mr-left" prop="endHopeWage">
                <el-input v-model.number="form.endHopeWage"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="日期">
                <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format='yyyy-MM-dd hh:mm:ss' :picker-options="pickerOptions"
                  :default-value="today" :appendToBody="false">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="integ-wid">
              <el-form-item label="简历完整度" prop="startIntegrity">
                <el-input v-model.number="form.startIntegrity">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="-" label-width="12px" class="mr-left" prop="endIntegrity">
                <el-input v-model.number="form.endIntegrity">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="btnBox">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 图表1 -->
        <div class="grid-content bg-purple" ref="echarts">
          <!-- 内容+图表 -->
          <!-- id不要重复 -->
          <div id="ec_1"></div>
        </div>
        <!-- 图表1 -->
        <el-table :data="tableData" style="width: 100%" :stripe='true' header-row-class-name='table'>
          <el-table-column prop="resumeTime" label="日期">
          </el-table-column>
          <el-table-column prop="resumeCount" label="简历增长量">
          </el-table-column>
          <el-table-column prop="tongBi" label="同比">
          </el-table-column>
          <el-table-column prop="huanBi" label="环比">
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page" :page-sizes="[5,10,30,60,100,200,300]" :page-size="size"
            layout="prev, pager, next, jumper, sizes, total" :total="total"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
import { getArea, education } from '../../../../api/index'
import { resumeEcharts, resumeList } from '../../../../api/dataCenter'
import bus from '../../../common/bus'
export default {
  name: 'resumeNumber',
  data () {
    // 校验工资
    let checkStartWage = (rule, value, callback) => {
      if (value && typeof value != 'number') {
        callback(new Error('必须为数字'))
      }
      if (this.form.endHopeWage && value) {
        if (this.form.endHopeWage < value) {
          callback(new Error('薪资输入错误'));
        } else {
          callback()
        }
      } else {
        callback()
      }
    };
    let checkEndWage = (rule, value, callback) => {
      if (value && typeof value != 'number') {
        callback(new Error('必须为数字'))
      }
      if (this.form.startHopeWage && value) {
        if (this.form.startHopeWage > value) {
          callback(new Error('薪资输入错误'));
        } else {
          callback()
        }
      } else {
        callback()
      }
    };
    // 校验年龄
    let checkEndAge = (rule, value, callback) => {
      if (this.form.startAge && value) {
        if (this.form.startAge > value) {
          callback(new Error('年龄选择错误'));
        } else {
          callback()
        }
      } else {
        callback()
      }
    };
    let checkStartAge = (rule, value, callback) => {
      if (this.form.endAge && value) {
        if (this.form.endAge < value) {
          console.log(123);
          callback(new Error('年龄选择错误'));
        } else {
          callback();
        }
      } else {
        callback()
      }
    };
    // 校验完整度
    let checkStartInteg = (rule, value, callback) => {
      if (value && typeof value != 'number') {
        callback(new Error('必须为数字'))
      } else if (value > 100) {
        callback(new Error('完成度不能超过100'))
      }
      if (this.form.endIntegrity && value) {
        if (this.form.endIntegrity < value) {
          console.log(123);
          callback(new Error('完成度输入错误'));
        } else {
          callback();
        }
      } else {
        callback()
      }
    };
    let checkEndInteg = (rule, value, callback) => {
      if (value && typeof value != 'number') {
        callback(new Error('必须为数字'))
      } else if (value > 100) {
        callback(new Error('完成度不能超过100'))
      }
      if (this.form.startIntegrity && value) {
        if (this.form.startIntegrity > value) {
          console.log(123);
          callback(new Error('完成度输入错误'));
        } else {
          callback();
        }
      } else {
        callback()
      }
    };
    return {
      page: 1,
      size: 5,
      total: 0,
      date: [],
      today: null,
      pickerOptions: {
        disabledDate: val => {
          let date = new Date()
          if (val > date) {
            return true
          }
        }
      },
      form: {
        startAge: null,
        endAge: null,
        currentResidence: null,
        sex: null,
        education: null,
        startHopeWage: null,
        endHopeWage: null,
        startIntegrity: null,
        endIntegrity: null,
      },
      rules: {
        endIntegrity: [{ validator: checkEndInteg }],
        startIntegrity: [{ validator: checkStartInteg }],
        startHopeWage: [{ validator: checkStartWage }],
        endHopeWage: [{ validator: checkEndWage }],
        startAge: [{ validator: checkStartAge }],
        endAge: [{ validator: checkEndAge }]
      },
      area: [],
      education: [],
      echarts: null,
      tableData: [],
      LineData: [],
      LineLabel: []
    }
  },
  created () {
    this.today = new Date() - 30 * 24 * 60 * 60 * 1000;
  },
  mounted () {
    getArea().then(res => {
      if (res.success) {
        this.area = res.data || []
        console.log(this.area);
      }
    });
    education().then(res => {
      if (res.success) {
        this.education = res.data || []
      }
    })
    this.getEchartsData();
    this.getList();
  },
  methods: {
    // 搜索
    search () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.getList();
          this.getEchartsData();
        }
      })
    },
    // 绘制图表
    optionChart () {
      let Line = {
        config: true,
        //标题
        title: {
          text: "", //标题
          subtext: "", //副标题
          x: 'center', //位置默认居中
        },
        //提示
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        legend: {
          orient: 'vertical', //垂直：vertical； 水平 horizontal
          left: 'middle', //位置默认右
          data: ['简历增长量'], // ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          textStyle: {
            color: '#DCDFE6',
            fontSize: 12
          }
        },
        //组建
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100
        },
        {
          show: true,
          type: 'slider',
          realtime: true,
          textStyle: {
            color: '#fff'
          },
          start: 0,
          end: 100
        }],
        grid: {
          left: '10%',
          top: '10%',
          right: '10%',
          bottom: '25%',
        },
        //水平坐标
        xAxis: [{
          type: 'category',
          data: this.LineLabel, // ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          // 文字颜色
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { //网格线
            "show": false
          }
        }],
        //垂直坐标
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          }
        }],
        //series数据
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '简历增长量',
            type: 'line',
            data: this.LineData
          }
        ]
      }
      let option_pie = MyEcharts.EchartsOption.Line('', '', Line)
      this.echarts = MyEcharts.initChart(option_pie, 'ec_1');
      console.dir(this.$refs.echarts);
      window.addEventListener('resize', () => {
        console.log(1);
        this.echarts.resize();
      })
      bus.$on('collapse', i => {
        MyEcharts.initChart(option_pie, 'ec_1')
      })
    },
    // 获取图表数据
    getEchartsData () {
      let query;
      if (this.date) {
        if (this.date.length) {
          query = { ...this.form, startTime: this.date[0], endTime: this.date[1], page: this.page, size: this.size }
        } else {
          query = { ...this.form, startTime: null, endTime: null, page: this.page, size: this.size }
        }
      } else {
        query = { ...this.form, startTime: null, endTime: null, page: this.page, size: this.size }
      }
      //根据年龄确定出生日期范围
      let startAge = query.startAge;
      if (query.endAge) {
        query.startAge = this.$day()
          .subtract(Number(query.endAge), 'years')
          .format('YYYY');
      } else {
        query.startAge = query.endAge;
      }
      if (query.startAge) {
        query.endAge = this.$day()
          .subtract(Number(startAge), 'years')
          .format('YYYY');
      } else {
        query.endAge = startAge;
      }
      console.log(query);
      resumeEcharts(query).then(res => {
        if (res.success) {
          let data = res.data.reverse()
          this.LineData = data.map(i => {
            return i.resumeCount
          })
          this.LineLabel = data.map(i => {
            return i.resumeTime
          })
          this.optionChart();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 重置
    reset () {
      this.form = {
        startAge: null,
        endAge: null,
        currentResidence: null,
        sex: null,
        education: null,
        startHopeWage: null,
        endHopeWage: null,
        startIntegrity: null,
        endIntegrity: null,
      }
      this.page = 1;
      this.size = 5;
      this.date = []
      this.getEchartsData()
      this.getList()
    },
    // 获取分页数据
    getList () {
      let query;
      if (this.date) {
        if (this.date.length) {
          query = { ...this.form, startTime: this.date[0], endTime: this.date[1], page: this.page, size: this.size }
        } else {
          query = { ...this.form, startTime: null, endTime: null, page: this.page, size: this.size }
        }
      } else {
        query = { ...this.form, startTime: null, endTime: null, page: this.page, size: this.size }
      }
      //根据年龄确定出生日期范围
      let startAge = query.startAge;
      if (query.endAge) {
        query.startAge = this.$day()
          .subtract(Number(query.endAge), 'years')
          .format('YYYY');
      } else {
        query.startAge = query.endAge;
      }
      if (query.startAge) {
        query.endAge = this.$day()
          .subtract(Number(startAge), 'years')
          .format('YYYY');
      } else {
        query.endAge = startAge;
      }
      // query.startAge = this.$day()
      //   .subtract(Number(query.endAge), 'years')
      //   .format('YYYY');
      // query.endAge = this.$day()
      //   .subtract(Number(startAge), 'years')
      //   .format('YYYY');
      console.log(query);
      resumeList(query).then(res => {
        if (res.success) {
          this.tableData = res.data.records || [];
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getList();
    },
    handleSizeChange (val) {
      this.size = val;
      this.getList();
    }
  }
}
</script>

<style lang="css" scoped>
.resumeNumber {
    width: 100%;
}
.contents {
    background: #080950;
    padding: 20px 32px;
}
.bg-change {
    background: #08085f;
    padding-top: 28px;
    width: 100%;
}
.el-form /deep/ .el-form-item__label {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 30px;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.el-form /deep/ .el-input__inner {
    width: 216px;
    height: 30px;
    line-height: 30px;
    background: rgba(21, 22, 114, 1);
    border: 1px solid rgba(16, 69, 218, 1);
    opacity: 1;
}
.el-form /deep/ .el-range-input {
    background: rgba(21, 22, 114, 1);
}
.el-form /deep/ .el-range-separator {
    color: rgba(255, 255, 255, 1);
}
.dbInput {
    display: flex;
}
.dbInput /deep/ .el-input__inner {
    width: 100px !important;
}
.dbInput /deep/ .el-input {
    width: 100px !important;
}
.dbInput /deep/ .mr-left {
    margin-left: 5px;
}
.integ-wid /deep/ .mr-left {
    margin-left: 5px;
}
.integ-wid {
    display: flex;
}
.integ-wid /deep/ .el-input__inner,
.integ-wid /deep/ .el-input {
    width: 79px !important;
}
.integ-wid /deep/ .el-input-group__append {
    padding: 0 4px;
    background: transparent;
    border: 1px solid rgba(16, 69, 218, 1);
    border-left: none;
}
.line {
    margin: 0 5px;
    color: rgba(255, 255, 255, 1);
}
.bg-purple {
    background-color: transparent !important;
    width: 100%;
    text-align: center;
}
#ec_1 {
    margin: 0 auto;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: space-around;
}
.el-table {
    margin-top: 20px;
    background: transparent;
    border: 1px solid #042c9b;
}
.el-table /deep/ tr,
.el-table /deep/ th,
.el-table /deep/ td {
    height: 34px;
    background-color: transparent !important;
    text-align: center;
    border: none;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 23px;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.el-table /deep/ .table {
    height: 34px;
    background: rgba(4, 44, 155, 1) !important;
    opacity: 1;
}
.table /deep/ th {
    height: 34px;
    background: rgba(4, 44, 155, 1) !important;
    opacity: 1;
}
.el-table.el-table--striped /deep/ .el-table__body tr.el-table__row--striped td {
    background-color: rgba(21, 22, 114, 1) !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
    content: '';
    position: absolute;
    background-color: transparent !important;
    z-index: 1;
}
.btnBox .el-button {
    margin-left: 20px;
    width: 80px;
    height: 30px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0;
    color: rgba(255, 255, 255, 1);
    /* letter-spacing: 79px; */
    background: rgba(16, 69, 218, 1);
    opacity: 1;
    border-radius: 4px;
}
.page {
    text-align: center;
    padding: 10px 0;
}
.page /deep/ .btn-prev,
.page /deep/ .btn-next,
.page /deep/ li.number,
.page /deep/ li.more,
.page /deep/ .el-pagination__jump .el-input__inner {
    width: 30px;
    height: 26px;
    color: rgba(255, 255, 255, 1);
    background: transparent;
    border: 1px solid rgba(16, 69, 218, 1);
}
.page /deep/ .el-pagination__sizes .el-input__inner {
    background: transparent;
    border: 1px solid rgba(16, 69, 218, 1);
}
</style>